<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Jquery mobile</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">

<!-- Extra Codiqa features -->
<link rel="stylesheet" href="css/base.css">

<!-- jQuery and jQuery Mobile -->
<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/extend.js"></script>
<script src="js/base.js"></script>
<script src="js/libs/jquery.mobile-1.3.1.min.js"></script>

<!-- extend -->
<script>
var extraJS = [];
</script>
</head>

<body>
<div data-role="page" id="about">     
          
    <div data-role="header">     
        <h1>Home</h1>     
        <div data-role="navbar">     
        <ul>     
            <li><a href="a.html" class="ui-btn-active">Home</a></li>     
            <li><a href="b.html" >Credits</a></li>     
            <li><a href="c.html" >Contact</a></li>     
        </ul>          
        </div>     
    </div>     
              
    <div data-role="content">     
    <p>     
        This is the Home Page     
    </p>     
    </div>     
          
   <div data-role="footer"  data-position="fixed" data-theme="b"  class="myfooter" data-id="main" >
		 <div data-role="navbar">
			<ul>
			 <li><a href="about.html"  data-transition="flip"  class="">Royals</a></li>
			 <li><a href="index.html">Leaders</a></li>
		  </ul>
	   </div><!-- /navbar -->

	</div>  
              
</div>    
<script>
	//extraJS.push('js/about.js');
	$('#about').on('pagebeforeshow', function(event, prevPage){
		alert(2)
		/*$('#about').off('click').on('click', function(){
			alert(prevPage.prevPage.attr("id"))
		})*/
	});
</script>
<!--<script src="js/about.js">
// page init
$('#about').on('pagebeforeshow', function(event, prevPage){
	$('#about').off('click').on('click', function(){
		alert(prevPage.prevPage.attr("id"))
	})
});
</script>-->
<!-- /page -->

<script src="js/libs/require/require.js" data-main="js/main.js"></script>
</body>
</html>
